<template>
    <div class="ask_info">
        <img v-if="userInfo && userInfo.is_gpt_vip != 0"
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/chat/chat_vip_bj1.png" class="chat-bj" alt="" />
        <img v-else src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/chat/chat_vip_bj2.png?v=1" class="chat-bj"
            alt="" />

        <div class="nav">
            <div class="nav-left">
                <img src="~/assets/images/logo_white.png" alt="" />
                让天下没有难懂的财税
            </div>
            <nuxt-link to="/cswd">
                <div class="nav-right">
                    <i class="el-icon-s-home"></i>返回首页
                </div>
            </nuxt-link>
        </div>

        <div class="chat">
            <!-- 对话区域 -->
            <div class="dialogue">
                <div class="chat-header">
                    <div v-if="userInfo && quizData" class="left">
                        <div v-if="
                            quizData.uid == userInfo.id
                                ? QuizDetail.ans_uid.avatar
                                : QuizDetail.uid.avatar
                        " class="avatar">
                            <img :src="quizData.uid == userInfo.id
                                ? QuizDetail.ans_uid.avatar
                                : QuizDetail.uid.avatar
                                " alt="" class="img1" />
                            <img v-if="
                                quizData.uid == userInfo.id &&
                                quizData.ans_uid
                            " class="v" src="~/assets/images/csjh/V.png" alt="" />
                        </div>

                        <!-- <div class="nickname"></div> -->

                        <!-- <div class="city">
                            <i
                                v-show="QuizDetail.uid.city"
                                class="el-icon-location"
                            ></i>
                            {{ QuizDetail.uid.city }}
                        </div> -->
                        <div v-show="quizData.label_name" v-for="(item, index) in quizData.label_name.split(
                            ','
                        )" :key="index" class="tag">
                            {{ item }}
                        </div>
                    </div>
                    <div class="right">
                        <!-- <i class="el-icon-message-solid"></i>
                        <myMarqueeLeft
                            v-if="promaptList.length > 0"
                            :sendVal="promaptList"
                        ></myMarqueeLeft> -->
                        <img v-if="userInfo && userInfo.is_gpt_vip == 0"
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/chat/chat_vip_img0.png" class="govip"
                            alt="" @click="set_payVipShow(true)" />
                        <template v-if="
                            quizData.coupon_id &&
                            quizData.status != 3 &&
                            isShowDJS == 0
                        ">
                            距离结束时间：
                            <div class="time">{{ CountdownM }}</div>
                            <div class="mao">:</div>
                            <div class="time">{{ CountdownS }}</div>
                        </template>
                    </div>
                </div>

                <div class="chat-con">
                    <chatList v-if="userInfo" ref="chatList" :quizData="quizData" :QuizDetail="QuizDetail"
                        :curMessageList="curMessageList" :showTimeTooltip="showTimeTooltip"
                        :quizWendaReminder="quizWendaReminder" :isWork="isWork" :DJSnoTimeShow="DJSnoTimeShow"
                        :isShowDJS="isShowDJS" @previewImg="previewImg" @checkSatisfied="checkSatisfied"></chatList>
                </div>

                <div class="editor" id="ctrlVpaste" @keydown="keydown">
                    <div class="tool">
                        <div class="right">
                            <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                                :on-success="onSuccess" :headers="headers">
                                <div class="tool-item">
                                    <i class="el-icon-picture"></i>
                                </div>
                            </el-upload>
                            <el-popover v-model="quickShow" placement="top-start" width="650" trigger="hover">
                                <div class="quick-info">
                                    <div class="quick-title">常用语</div>
                                    <div class="quick-list">
                                        <div v-for="(item, index) in quickList" :key="index" class="quick-item" @click="
                                            textarea = item.title;
                                        quickShow = false;
                                        ">
                                            {{ item.title }}
                                        </div>
                                    </div>
                                </div>

                                <div v-show="quizData &&
                                    userInfo &&
                                    quizData.uid != userInfo.id
                                    " class="tool-item" slot="reference">
                                    <i class="el-icon-s-comment"></i>
                                </div>
                            </el-popover>
                            <el-popover v-model="emojiShow" placement="top-start" width="522px" trigger="click">
                                <div class="quick-info" style="padding: 0">
                                    <div class="quick-title" style="margin: 12px">
                                        表情包
                                    </div>
                                    <div v-if="emojiShow" class="quick-list" style="
                                            max-height: 500px;
                                            max-width: 607px;
                                            overflow-y: auto;
                                            display: flex;
                                            flex-wrap: wrap;
                                        ">
                                        <el-tooltip v-for="(item, index) in emojiList" :key="index" effect="light"
                                            :content="item.name" placement="top-end">
                                            <img class="quick-img" :src="item.url" :alt="item.name"
                                                @click="clickEmoji(item.url)" />
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div v-show="quizData && userInfo" class="tool-item" slot="reference">
                                    <img src="~/assets/images/csjh/emoji.png" alt="" />
                                </div>
                            </el-popover>
                        </div>
                        <div class="entering">
                            {{
                                quizData.status == 2 && entering == 1
                                    ? "对方输入中..."
                                    : ""
                            }}
                        </div>
                    </div>
                    <!-- 输入框 -->
                    <el-input v-model="textarea" type="textarea" :rows="3" placeholder="请输入内容" resize="none"
                        class="textarea">
                    </el-input>
                </div>
                <!-- 发送和结束按钮 -->
                <div class="submit">
                    <div class="submit-text">Shift + Enter 换行</div>
                    <el-button v-if="
                        userInfo &&
                        userInfo.id == quizData.uid &&
                        quizData.status != 3
                    " class="submit1" type="primary" @click="closeConfirm">
                        结束
                    </el-button>

                    <el-button v-if="userInfo && userInfo.id == quizData.ans_uid" class="submit1" type="primary"
                        @click="stop_answer">
                        <img v-show="isStop == 1" src="~/assets/images/csjh/play.png" alt="" />
                        <i v-show="isStop != 1" class="el-icon-caret-right"></i>
                        {{ isStop == 1 ? "暂停" : "已暂停" }}
                    </el-button>
                    <el-button class="submit2" type="primary" :disabled="submitDisabled" @click="submitText(1)">
                        <span v-show="switchSubmitText">发送</span>
                        <i v-show="!switchSubmitText" class="el-icon-loading"></i>
                    </el-button>
                </div>
            </div>
            <!-- 对话区域 end -->
            <!-- 右侧功能区域 -->
            <div class="action" :style="{ width: actionWitch ? '35%' : '0' }">
                <div class="expand" @click="changActionWitch">
                    <i class="el-icon-caret-right" :style="{
                        transform: actionWitch
                            ? 'rotate(0deg)'
                            : 'rotate(180deg)',
                    }"></i>
                </div>

                <div class="action-item">
                    <div class="action-title">温馨提示</div>
                    <div class="promapt-list">
                        <div v-for="(item, index) in promaptList" :key="index" class="promapt-item">
                            {{ item }}
                        </div>
                    </div>
                </div>
                <!-- <div class="action-img">
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/chat/chat_vip_img1.png"
                        alt=""
                        @click="set_payVipShow(true)"
                    />
                </div> -->
                <div v-if="QuizDetail &&
                    quizData.status > 1" class="ans-info" :style="{ backgroundImage: `url(${rightBj1})` }">
                    <img :src="'https://' + wx_qrcode" class="wx_qrcode" alt="">

                    <div class="info-text">
                        <div class="name">
                            {{ QuizDetail.ans_uid.nickname }}
                            <i class="el-icon-success"> 已认证 </i>
                        </div>
                        <div class="tips">
                            扫码关注老师 <br>
                            解锁问答宝库
                        </div>
                    </div>
                    <img :src="QuizDetail.ans_uid.avatar" @load="getAnsInfo" class="avatar" alt="" />

                </div>
                <div class="action-img">
                    <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/chat/chat_vip_img2.png" alt=""
                        @click="set_payVipShow(true)" />
                </div>
                <div class="action-item">
                    <div class="action-title">热门推荐</div>
                    <div class="aciotn-list">
                        <div v-for="(item, index) in tabsList0" :key="index" class="action-list-item">
                            <div class="drop"></div>
                            <nuxt-link :to="`/cswd/${item.id}.html`" target="_blank">
                                {{ item.title }}
                            </nuxt-link>
                        </div>
                    </div>
                </div>
                <!-- <div class="action-item">
                    <div class="action-title">
                        提问者历史提问
                        <span v-if="quizData">
                            <nuxt-link :to="`/cswd/user/${quizData.uid}`">
                                查看更多>
                            </nuxt-link>
                        </span>
                    </div>
                    <div class="aciotn-list">
                        <div
                            v-for="(item, index) in tabsList1"
                            :key="index"
                            class="action-list-item"
                        >
                            <div class="drop"></div>
                            <nuxt-link :to="`/cswd/${item.id}.html`">
                                {{ item.title }}
                            </nuxt-link>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="action-item" style="padding-bottom: 20px">
                    <div class="action-title">快捷入口</div>
                    <div class="action-lits2">
                        <nuxt-link to="/quizdata" target="_blank">
                            <div class="action-item2">
                                <img
                                    src="~/assets/images/csjh/kjrk1.png"
                                    alt=""
                                />
                                问题库
                            </div>
                        </nuxt-link>
                        <nuxt-link to="/ssfgk/index/0/1" target="_blank">
                            <div class="action-item2">
                                <img
                                    src="~/assets/images/csjh/kjrk2.png"
                                    alt=""
                                />
                                税收法规库
                            </div>
                        </nuxt-link>
                        <nuxt-link to="/kjfgk/index/0/1" target="_blank">
                            <div class="action-item2">
                                <img
                                    src="~/assets/images/csjh/kjrk3.png"
                                    alt=""
                                />
                                会计法规库
                            </div>
                        </nuxt-link>
                    </div>
                </div> -->
            </div>
            <!-- 右侧功能区域 end -->
        </div>

        <!-- 评价 -->
        <el-dialog title="" :visible.sync="evaluateShow" class="evaluate-dialog" width="397px"
            :close-on-click-modal="false">
            <div class="evaluate">
                <div class="title">您的评价是老师进步的动力</div>
                <el-rate v-model="evaluate_star" show-text :texts="texts" :colors="['#FFC847', '#FFC847', '#FFC847']">
                </el-rate>
                <div class="check-box">
                    <div v-for="(item, index) in checkBoxList[evaluate_star - 1]" :key="index" class="check-box-group"
                        :class="{ active: item.checked }" @click="selectCheckBox(index)">
                        {{ item.label }}
                    </div>
                </div>

                <el-input v-model="evaluate_text" type="textarea" :rows="4" maxlength="300" placeholder="您的评价是对答主最好的鼓励"
                    resize="none" class="textarea">
                </el-input>
                <div class="but">
                    <el-button type="primary" size="mini" @click="subimtEvaluate">提交</el-button>
                </div>
            </div>
        </el-dialog>

        <el-image class="my-img" v-show="false" ref="myImg" src="" :preview-src-list="previewList">
        </el-image>
        <!-- 评价 end -->

        <!-- 等待 -->
        <div v-if="
            userInfo &&
            quizData &&
            quizData.status == 1 &&
            userInfo.id == quizData.uid &&
            curMessageList.length == 0
        " class="loading">
            <div class="loading-con">
                <!-- <i class="el-icon-loading"></i> -->
                <div v-if="userInfo.is_gpt_vip == 0" class="wait">
                    <img src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/qa_wait/wait_bj.png"
                        class="wait_bj" alt="" />
                    <img src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/qa_wait/wait_icon1.png"
                        class="wait_icon1" alt="" />
                </div>
                <div v-if="userInfo.is_gpt_vip > 0" class="wait">
                    <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/cswd_vip_loading.gif"
                        class="wait_bj" alt="" />
                </div>
                <!-- <div class="wait_plan_bar">
                    <div class="plan_bar_xm_img">
                        <img
                            src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/qa_wait/wait_icon2.png"
                            class="plan_bar_xm"
                            alt=""
                        />
                        <img
                            src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/qa_wait/wait_icon3.png"
                            class="plan_bar"
                            alt=""
                        />
                    </div>
                </div> -->
                <div class="text1">尊敬的会员，我们将优先安排老师解答</div>
                <div class="pc_cswd_loading">
                    <img v-if="userInfo.is_gpt_vip == 0"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/pc_cswd_loading.png" alt="" />
                    <img v-if="userInfo.is_gpt_vip > 0"
                        src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/qa_wait/qa_tips.png" alt="" />
                </div>
                <!-- <div class="text1">等待老师接单中…</div>
                <div class="text2">
                    提示：
                    <div style="display: flex">
                        <div>1、</div>
                        非工作日时间段，可能无法及时为您匹配到老师， 烦请谅解。
                    </div>
                    <div style="display: flex">
                        <div>2、</div>
                        请在问答中保持在线，及时沟通，若您超过三分钟
                        不回复，系统将默认结束本次服务。
                    </div>
                    <div style="display: flex">
                        <div>3、</div>
                        如在沟通中有政策依据需求，请明确向老师提出。
                    </div>
                </div> -->
            </div>
        </div>
        <!-- 等待 end -->
        <!-- 浮动弹窗 -->
        <no-ssr>
            <!-- <dynamicPopUps></dynamicPopUps> -->
            <payVip :show="payVipShow"></payVip>
        </no-ssr>
    </div>
</template>

<script>
import chatList from "@/components/csjh/chatList.vue";
import answerItem from "@/components/csjh/answerItem.vue";
import pqtItem from "@/components/csjh/pqtItem.vue";
import myMarqueeLeft from "@/components/csjh/myMarqueeLeft.vue";

import { escape2Html } from "@/assets/utils/utils";

import { mapState, mapActions, mapMutations } from "vuex";

import axios from "axios";

import emojiList from "@/assets/json/emojiList.json";

import payVip from "@/components/nav/payVip";

import rightBj1 from "@/assets/images/csjh/dnld/right-bj2.png";

import {
    getQuizDetail_chat,
    getzegotoken_chat,
    sendcheck_chat,
    sendmessage_chat,
    renew_chat,
    check_satisfied_chat,
    evaluate_chat,
    getMyquizList_chat,
    getWendainfo_hot,
    end_now_chat,
    check_read,
    to_message_user,
    isWorkDay,
    getQuicReply,
    question_history,
    get_prompt,
    stop_answer,
    delay_pushmessage,
    get_server_time,
    update_user_quiz,
    getOtherUserHomeInfo
} from "@/assets/api/csjhApi";

import { commonUpload } from "@/assets/api/indexApi";

import MiddleUtil from "@/assets/utils/MiddleUtil";

import { goTop } from "@/assets/utils/utils";
import mixinsUser from "~/mixins/user";

var zim = null;
var timerId = null;
export default {
    components: {
        chatList,
        answerItem,
        pqtItem,
        myMarqueeLeft,
        payVip,
    },
    mixins: [mixinsUser],
    head() {
        return {
            title: "小竹问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                },
            ],
        };
    },
    beforeMount() { },
    data() {
        return {
            rightBj1: rightBj1,

            textarea: "",
            tabsIndex: 0,
            evaluateShow: false,
            evaluate: 5,
            texts: [
                "不满意，各方面都很差",
                "不满意，待提高",
                "一般般，仍可改善",
                "比较满意，仍可改善",
                "特别棒，无可挑剔",
            ],
            checkBoxList: [
                [
                    {
                        label: "没解决问题",
                        checked: false,
                    },
                    {
                        label: "不专业",
                        checked: false,
                    },
                    {
                        label: "态度很差",
                        checked: false,
                    },
                    {
                        label: "回复太慢",
                        checked: false,
                    },
                    {
                        label: "听不懂回答",
                        checked: false,
                    },
                    {
                        label: "回答敷衍",
                        checked: false,
                    },
                ],
                [
                    {
                        label: "回复太慢",
                        checked: false,
                    },
                    {
                        label: "回答敷衍",
                        checked: false,
                    },
                    {
                        label: "听不懂回答",
                        checked: false,
                    },
                    {
                        label: "态度不好",
                        checked: false,
                    },
                    {
                        label: "不够专业",
                        checked: false,
                    },
                    {
                        label: "没解决问题",
                        checked: false,
                    },
                ],
                [
                    {
                        label: "态度一般",
                        checked: false,
                    },
                    {
                        label: "回答不够认真",
                        checked: false,
                    },
                    {
                        label: "不够专业",
                        checked: false,
                    },
                    {
                        label: "回答不够清楚",
                        checked: false,
                    },
                    {
                        label: "回答较慢",
                        checked: false,
                    },
                    {
                        label: "解决部分问题",
                        checked: false,
                    },
                ],
                [
                    {
                        label: "态度热情",
                        checked: false,
                    },
                    {
                        label: "回复很及时",
                        checked: false,
                    },
                    {
                        label: "专业度高",
                        checked: false,
                    },
                    {
                        label: "解决了问题",
                        checked: false,
                    },
                    {
                        label: "回答很认真",
                        checked: false,
                    },
                    {
                        label: "回答很清楚",
                        checked: false,
                    },
                ],
                [
                    {
                        label: "态度非常好",
                        checked: false,
                    },
                    {
                        label: "回答迅速",
                        checked: false,
                    },
                    {
                        label: "回答很专业",
                        checked: false,
                    },
                    {
                        label: "回答很有帮助",
                        checked: false,
                    },
                    {
                        label: "回答很认真",
                        checked: false,
                    },
                    {
                        label: "回答很清楚",
                        checked: false,
                    },
                ],
            ],

            previewList: [], // 图片预览

            quizData: false, // 提问详情
            QuizDetail: false,
            quizWendaReminder: "", // 温馨提示
            chatroomData: [],

            curMessageList: [], // 消息地址

            deadline: 0,

            imgUploadUrl: "", // 上传图片接口地址
            imgUrl: "",

            statisticShow: true,

            evaluate_star: 5,
            evaluate_text: "",

            tabsList0: [], // 右侧第一个列表数据
            tabsList1: [],

            id: 0,

            get_extendedData: (str) => {
                if (typeof str == "string") return JSON.parse(str);
                else return str;
            },
            timeInterval: null,
            timeInterval2: null,
            showTimeTooltip: false,

            switchSubmitText: true,

            isWork: 1,

            quickList: [], // 快捷消息
            quickShow: false,
            emojiShow: false,

            emojiList: emojiList,

            actionWitch: true,

            promaptList: [],

            isStop: 1, // 是否暂停

            bodyHidden: true, // 用户是否在当前页

            subimtEvaluateSwitch: false,

            timerStopAsk: null,
            StopAskI: 1,

            serverTimeDifference: 0, // 服务器与本地的时间差
            CountdownM: "00",
            CountdownS: "00",
            submitDisabled: false,
            DJSnoTimeShow: false,
            isShowDJS: 0, // 0非会员问题  >0会员问题

            wx_qrcode: ''
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            goeasyObj: (state) => state.goeasyObj,
            payVipShow: (state) => state.payVipShow,
        }),
        ...mapState("quiz", {
            entering: (state) => state.entering,
        }),
        //上传图片的请求头
        headers() {
            return {
                token: this.userInfo ? this.userInfo.token : "",
            };
        },
    },
    watch: {
        textarea: function (n, o) {
            if (o) {
                if (!n) this.setEntering(false);
            } else {
                if (n) this.setEntering(true);
            }
        },
    },
    beforeDestroy() {
        try {
            zim.logout();
            document.removeEventListener(
                "visibilitychange",
                this.handleVisibilityChange
            );
            clearInterval(this.timerStopAsk);
            if (this.timeInterval) clearInterval(this.timeInterval);
            if (this.timeInterval2) clearInterval(this.timeInterval2);
        } catch (error) { }
    },

    mounted() {
        this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";
        // 注册监听事件
        // window.addEventListener("onmessageWS", this.getsocketData);
        this.id = this.$route.params.id;
        this.getAskDetail();
        this.$nextTick(() => {
            goTop(50, true);
        });
        this.addPaste();
        MiddleUtil.$on("askClose", (data) => {
            if (data.is) this.updataAskDetail(true);
            if (data.quiz_id == this.quizData.id) this.updataAskDetail(false);
        });

        this.isWorkDay();
        this.getQuicReply();
        this.get_prompt();

        this.timerStopAsk = setInterval(() => {
            this.StopAsk();
        }, 1000);

        this.get_server_time();

        document.addEventListener(
            "visibilitychange",
            this.handleVisibilityChange
        );
    },
    methods: {
        ...mapActions("common", [
            "createZIM",
            "ZIMLogin",
            "getUserInfo2",
            "getUserInfo",
        ]),

        ...mapMutations("common", ["set_payVipShow"]),

        // 检查问题十分钟后没人接单结束问题
        StopAsk() {
            if (this.userInfo && this.quizData) {
                if (
                    this.quizData.status == 1 &&
                    this.userInfo.id == this.quizData.uid &&
                    this.curMessageList.length == 0
                ) {
                    if (this.StopAskI > 600) {
                        // 触发弹窗
                        clearInterval(this.timerStopAsk);
                        this.$confirm("当前老师不在线，去AI问问", "提示", {
                            distinguishCancelAndClose: true,
                            confirmButtonText: "前往财税AI",
                            cancelButtonText: "继续等待",
                        })
                            .then(() => {
                                this.$router.push({
                                    path: "/chatgpt/xzcsgpt",
                                });
                            })
                            .catch((action) => { });
                    } else {
                        this.StopAskI++;
                    }
                } else {
                    // 停止计时器
                    clearInterval(this.timerStopAsk);
                }
            }
        },

        StopAsk2() {
            if (this.chatroomData.length == 0) return;
            if (this.quizData.status == 3) {
                clearInterval(this.timeInterval2);
                return;
            }
            if (
                this.quizData.uid == this.userInfo.id &&
                this.userInfo.is_gpt_vip > 0
            ) {
                clearInterval(this.timeInterval2);
                return;
            }
            const addTime = this.chatroomData[0].createtime * 1000;
            const timestampMs = Date.now() - this.serverTimeDifference;
            const timeDifference = Math.trunc((timestampMs - addTime) / 1000);
            const Difference = 600 - timeDifference;

            if (Difference < 0) {
                this.CountdownM = "00";
                this.CountdownS = "00";
                this.submitDisabled = true;
                // this.checkAskIsClose();
                this.closeAsk();
                clearInterval(this.timeInterval2);
                return;
            }

            this.CountdownM = Math.trunc(Difference / 60);
            this.CountdownS = Difference % 60;
            if (this.CountdownM < 2) {
                if (!this.DJSnoTimeShow)
                    this.$nextTick(() => {
                        this.$refs.chatList.scrollBottom();
                    });
                this.DJSnoTimeShow = true;
            }

            this.CountdownM = "0" + this.CountdownM; // 因为最多十分钟，所以不判断
            if (this.CountdownS < 10) this.CountdownS = "0" + this.CountdownS;
        },

        async get_server_time() {
            const timestampMs0 = Date.now();

            const res = await get_server_time({});
            const timestampMs = Date.now();
            if (res.code == 1) {
                if (timestampMs - timestampMs0 > 10000) return;
                let serverTime = res.data.time * 1000;
                this.serverTimeDifference = timestampMs - serverTime;
                // console.log(
                //     this.serverTimeDifference,
                //     timestampMs,
                //     timestampMs - this.serverTimeDifference,
                //     serverTime
                // );
            }
        },

        // 检查问题是否结束
        async checkAskIsClose() {
            const res = await getQuizDetail_chat({
                quiz_id: this.id,
                status: 0,
            });
            if (res.code == 1) {
                if (res.data.quiz.status == 3) {
                    this.quizData = res.data.quiz;
                    if (this.timeInterval) clearInterval(this.timeInterval);
                    if (this.timeInterval2) clearInterval(this.timeInterval2);

                    // console.log("停止");
                } else {
                    // console.log("未停止");
                }
            }
        },

        handleVisibilityChange() {
            if (document.hidden) {
                console.log("用户离开了当前页面");
                this.bodyHidden = false;
            } else {
                console.log("用户回到了当前页面");
                this.bodyHidden = true;
                this.sendConversationMessageReceiptRead();
                this.update_user_quiz();
            }
        },

        // 检查问题是否变成会员提问
        async update_user_quiz() {
            if (this.quizData.coupon_id && this.isShowDJS == 0) {
                const isShow = await update_user_quiz({
                    quiz_id: this.id,
                });
                if (isShow.code == 1) {
                    this.isShowDJS = isShow.data;
                    if (this.isShowDJS > 0 && this.timeInterval2) {
                        this.$refs.chatList.getCouponList();
                        clearInterval(this.timeInterval2);
                    }
                }
            }
        },

        sendConversationMessageReceiptRead() {
            if (this.quizData.uid == this.userInfo.id) {
                zim.sendConversationMessageReceiptRead(
                    this.quizData.ans_uid + "",
                    0
                );
            } else if (this.quizData.ans_uid == this.userInfo.id) {
                zim.sendConversationMessageReceiptRead(
                    this.quizData.uid + "",
                    0
                );
            }
        },

        // 获取提示语
        async get_prompt() {
            const res = await get_prompt({});
            if (res.code == 1) {
                for (let item of res.data) this.promaptList.push(item.content);
                console.log(this.promaptList);
            }
        },

        // 获取快捷输入
        async getQuicReply() {
            const res = await getQuicReply({});
            if (res.code == 1) {
                this.quickList = res.data;
            }
        },

        // 正在输入
        setEntering(is) {
            if (this.quizData.status != 2) return;

            let userId = this.quizData.uid;
            if (this.userInfo.id == this.quizData.uid)
                userId = this.quizData.ans_uid;

            to_message_user({
                uid: userId,
                quiz_id: this.quizData.id,
                entering: is ? 1 : 0,
            });
        },

        async isWorkDay() {
            const res = await isWorkDay({});
            this.isWork = res.code;
        },

        // 老师头像图片加载后获取详情拿到二维码
        async getAnsInfo() {
            const res = await getOtherUserHomeInfo({
                uid: this.quizData.ans_uid,
            })
            if (res.code == 1) {
                this.wx_qrcode = res.data.wx_qrcode
            }
        },

        // 获取提问详情
        async getAskDetail() {
            const res = await getQuizDetail_chat({
                quiz_id: this.id,
                status: 0,
            });

            if (res.code == 1) {
                if (res.data.quiz.info_images)
                    res.data.quiz.info_images =
                        res.data.quiz.info_images.split(",");
                this.quizData = res.data.quiz;
                this.QuizDetail = res.data;
                this.quizWendaReminder = res.data.wenda_reminder;
                // 记录上次点的暂停
                this.isStop = res.data.chatroom.is_stop == 0 ? 1 : 0;

                this.chatroomData = res.data.chatroomtext;
                if (res.data.chatroom.updatetime) {
                    this.deadline = res.data.chatroom.endtime * 1000;
                    this.statisticShow = false;
                    this.$nextTick(() => {
                        this.statisticShow = true;
                    });
                }
                this.getUserInfo2()
                    .then((user) => {
                        this.createZIM()
                            .then((zim_x) => {
                                this.ZIMLogin(zim_x).then((zim_l) => {
                                    zim = zim_l;
                                    this.getZIM_wd();
                                });
                            })
                            .catch(() => { });
                        this.$nextTick(() => {
                            this.switchUser();
                        });
                    })
                    .catch(() => { });

                if (this.timeInterval) clearInterval(this.timeInterval);
                this.timeInterval = setInterval(() => {
                    this.changMessageList();
                }, 2000);
                // 使用了优惠券的
                if (this.quizData.coupon_id && this.isShowDJS == 0) {
                    if (this.timeInterval2) clearInterval(this.timeInterval2);
                    this.timeInterval2 = setInterval(() => {
                        this.StopAsk2();
                    }, 1000);
                }
            } else {
                setTimeout(() => {
                    this.$router.push({
                        path: "/cswd",
                    });
                }, 2000);
            }
        },

        // 更新提问详情
        async updataAskDetail(is) {
            const res = await getQuizDetail_chat({
                quiz_id: this.id,
                status: 0,
            });


            if (res.code == 1) {
                if (res.data.quiz.info_images)
                    res.data.quiz.info_images =
                        res.data.quiz.info_images.split(",");
                this.quizData = res.data.quiz;
                this.QuizDetail = res.data;
                this.quizWendaReminder = res.data.wenda_reminder;
                this.chatroomData = res.data.chatroomtext;
                // 记录上次点的暂停
                this.isStop = res.data.chatroom.is_stop == 0 ? 1 : 0;
                if (res.data.chatroom.updatetime) {
                    this.deadline = res.data.chatroom.endtime * 1000;
                    this.statisticShow = false;
                    this.$nextTick(() => {
                        this.statisticShow = true;
                    });
                }

                if (is) {
                    if (!this.quizData.ans_uid) {
                        let that = this;
                        setTimeout(() => {
                            that.updataAskDetail(true);
                        }, 800);
                    } else {
                        this.curMessageList = [];
                        this.getHistoryMessage();
                    }
                }
            } else {
                setTimeout(() => {
                    this.$router.push({
                        path: "/cswd",
                    });
                }, 2000);
            }
        },

        // 暂停
        async stop_answer() {
            const res = await stop_answer({
                quiz_id: this.quizData.id,
                status: this.isStop,
            });
            if (res.code == 1) {
                this.isStop = this.isStop ? 0 : 1;
                if (this.curMessageList.length > 0)
                    this.curMessageList[
                        this.curMessageList.length - 1
                    ].timestamp = new Date().getTime();
                // new Date().getTime() - this.serverTimeDifference;
            }
        },

        // 时间循环检查提问距离结束的时间
        changMessageList() {
            // if (this.isStop == 1) return;
            // 不知道谁不需要检查 全tm乱了
            // if (this.quizData.uid == this.userInfo.id) {
            //     clearInterval(this.timeInterval);
            //     return;
            // }
            if (this.quizData.status == 3) {
                clearInterval(this.timeInterval);
                return;
            }
            if (this.curMessageList.length == 0) return;
            let message = this.curMessageList[this.curMessageList.length - 1];

            // 如果最后一条消息是提问者的，不判断倒计时
            if (message.senderUserID != this.quizData.ans_uid) {
                this.showTimeTooltip = false;
                return;
            }

            // 判断回答者是否在输入
            // if (this.textarea) {
            //     message.timestamp = new Date().getTime();
            //     return;
            // }

            // 获取时间错
            let time = new Date().getTime() - this.serverTimeDifference;
            let timeDifference = time - message.timestamp;
            // console.log(timeDifference / 1000);
            // console.log(message);
            if (timeDifference > 180000) {
                // this.closeAsk();
                this.checkAskIsClose();
                // clearInterval(this.timeInterval);
            }
            if (timeDifference > 120000) {
                this.showTimeTooltip = true;
                // console.log("提示");
            } else {
                this.showTimeTooltip = false;
            }
        },

        // 满意不满意
        async checkSatisfied(satisfied, reason = "") {
            if (!this.switchSubmitText) return;
            this.switchSubmitText = false;
            const res = await check_satisfied_chat({
                quiz_id: this.quizData.id,
                is_satisfied: satisfied,
                reason: reason,
            });
            this.switchSubmitText = true;
            if (res.code == 1) {
                if (satisfied == 2) this.evaluate_star = 2;
                this.evaluateShow = true;
                this.quizData.is_satisfied = satisfied;
                let that = this;
                this.$message({
                    showClose: true,
                    message: "已反馈",
                    type: "success",
                });
                // setTimeout(() => {
                //     that.$router.push({
                //         path: "/user/myquiz",
                //     });
                // }, 2000);
            }
        },

        // 对老师评价
        async subimtEvaluate() {
            if (this.subimtEvaluateSwitch) return;
            this.subimtEvaluateSwitch = true;

            let tags = [];
            for (let item of this.checkBoxList[this.evaluate_star - 1]) {
                if (item.checked) tags.push(item.label);
            }
            // console.log(tags);
            const res = await evaluate_chat({
                quiz_id: this.quizData.id,
                star: this.evaluate_star,
                evaluate: this.evaluate_text,
                label: tags.join(","),
            });
            this.subimtEvaluateSwitch = false;
            if (res.code == 1) {
                this.evaluateShow = false;
                this.$router.push({
                    path: "/user/myquiz",
                });
            }
        },

        goDetail(item) {
            this.id = item.id;
            this.getAskDetail(item.id);
        },

        // 选择评价
        selectCheckBox(index) {
            this.checkBoxList[this.evaluate_star - 1][index].checked =
                !this.checkBoxList[this.evaluate_star - 1][index].checked;
        },

        getsocketData(e) {
            console.log(e);
        },

        async changTabs(index) {
            const res1 = await getWendainfo_hot({});
            // const res2 = await question_history({
            //     user_id: this.quizData.uid,
            //     page: 1,
            //     pagesize: 3,
            // });

            if (res1.code == 1) {
                this.tabsList0 = res1.data;
            }
            // if (res2.code == 1) {
            //     this.tabsList1 = res2.data;
            // }
        },

        cahtEnd() { },

        // 预览图片
        previewImg(imgs) {
            this.previewList = imgs;
            this.$refs.myImg.showViewer = true;
        },

        // xxxxx
        async switchUser() {
            // 获取我的提问或者那啥
            this.changTabs(this.tabsIndex);
            if (
                this.userInfo.id == this.quizData.ans_uid ||
                this.userInfo.id == this.quizData.uid
            )
                this.getHistoryMessage();
        },

        // 获取历史消息 (因为是单聊，多次不同问题中同用户的聊天在即扣那边都是一个历史消息)
        getHistoryMessage(id) {
            try {
                for (let item of this.chatroomData) {
                    try {
                        // let str = item.message;
                        let str = escape2Html(item.message);
                        // str = item.message.replace(/[\'\"\\\/\b\f\n\r\t]/g, '')
                        // str = str.replace(/\r/g, "\\r");
                        // str = str.replace(/\n/g, "\\n");
                        // str = str.replace(/\s/g, "\\s");
                        let data = JSON.parse(str);
                        data.is_revoke = item.is_revoke;
                        data.is_supplement = item.is_supplement;
                        this.curMessageList.push(data);
                        // console.log(this.curMessageList);
                        // 将对方的统一消息标记为已读 (wc)
                        // if (this.chatroomData.user_id != this.userInfo.id)
                        //     this.curMessageList[
                        //         this.curMessageList.length - 1
                        //     ].receiptStatus = 2;
                    } catch (error) {
                        console.log(error);
                    }
                }
            } catch (error) {
                console.log(error);
            }
        },

        // 发送表情包
        clickEmoji(url) {
            this.emojiShow = false;
            this.imgUrl = url;
            this.submitText(111);
        },

        // 发送文本消息
        async submitText(messageType) {
            if (this.quizData.status == 3 && !this.$route.query.type) {
                this.$message.error("问题已结束");
                return;
            }
            if (
                this.quizData.uid != this.userInfo.id &&
                this.quizData.ans_uid &&
                this.quizData.ans_uid != this.userInfo.id
            ) {
                this.$message({
                    message: "当前问题已有指定老师回答！",
                    type: "warning",
                });
                return;
            }
            if (!this.switchSubmitText) return;
            // 为1 是没有就 return
            if (messageType == 1 && !this.textarea) return;

            // 关掉发送能力，防止重复点击
            this.switchSubmitText = false;

            const res = await sendcheck_chat({
                quiz_id: this.quizData.id,
                sender_userid: this.userInfo.id,
            });
            if (res.code == 1) {
                let toConversationID = this.quizData.uid;
                if (this.userInfo.id == this.quizData.uid)
                    toConversationID = this.quizData.ans_uid;

                var conversationType = 0; // 会话类型，取值为 单聊:0, 房间:1, 群组:2
                var config = {
                    priority: 1, // 设置消息优先级，取值为 低：1（默认），中：2，高：3
                    hasReceipt: true, // 发送消息时候，该消息是否带回执。
                };
                let userInfo = {
                    avatar: this.userInfo.avatar,
                    nickname: this.userInfo.nickname,
                    id: this.userInfo.id,
                    type: messageType,
                    quiz_id: this.quizData.id,
                };

                // 不同的消息给到不同的类型
                let message = "";
                if (messageType == 1) message = this.textarea;
                else if (messageType == 11) message = this.imgUrl;
                else if (messageType == 111) message = this.imgUrl;
                else if (messageType == 2) message = "续费消息"; // 自定义消息 (续费消息)

                var messageTextObj = {
                    type: 1,
                    message: message,
                    extendedData: JSON.stringify(userInfo),
                };
                var notification = {
                    onMessageAttached: function (message) {
                        // todo: Loading
                    },
                };
                let that = this;
                zim.sendMessage(
                    messageTextObj,
                    toConversationID + "",
                    conversationType,
                    config,
                    notification
                )
                    .then(function (sendRes) {
                        console.log("发送成功--------------------", sendRes);
                        // 发送成功
                        that.sendMessage(sendRes);
                    })
                    .catch(function (err) {
                        // 发送失败
                        console.log("发送失败--------------------", err);
                        if (err.code == 6000204) {
                            that.$message.error(err.message);
                        } else {
                            that.switchSubmitText = true;
                            that.ZIMLogin().then((zim_l) => {
                                zim = zim_l;
                                that.submitText(messageType);
                            });
                        }
                    });
            } else {
                this.updataAskDetail(false);
                this.switchSubmitText = true;
            }
        },

        // 消息发送成功
        async sendMessage(send) {
            var sendRes = { ...send.message };
            if (sendRes.message) {
                sendRes.message = sendRes.message.replace(/%/g, "%25");
                sendRes.message = sendRes.message.replace(/\+/g, "%2B");
                sendRes.message = sendRes.message.replace(/</g, "%3C");
                sendRes.message = sendRes.message.replace(/>/g, "%3E");
            } else return;
            sendRes.extendedData = JSON.parse(sendRes.extendedData);

            const res = await sendmessage_chat({
                quiz_id: this.quizData.id,
                message: JSON.stringify(sendRes),
                senderUserId: this.userInfo.id,
                role: this.userInfo.id == this.quizData.uid ? 1 : 2,
                type: 1,
                is_supplement: this.quizData.status == 3 ? 1 : 0,
            });
            if (res.code == 1) {
                this.textarea = "";
                if (this.curMessageList.length == 0) {
                    this.updataAskDetail(false);
                }

                let isPush = true;
                for (let item of this.curMessageList) {
                    if (item.messageID == sendRes.messageID) isPush = false;
                }
                if (isPush) {
                    if (sendRes.message)
                        sendRes.message = decodeURIComponent(sendRes.message);
                    sendRes.is_supplement = this.quizData.status == 3 ? 1 : 0;
                    this.curMessageList.push(sendRes);
                }
                if (this.isStop == 0) this.stop_answer();
                let that = this;
                timerId = setTimeout(function () {
                    delay_pushmessage({
                        id: res.data,
                        user_id:
                            that.userInfo.id == that.quizData.uid
                                ? that.quizData.ans_uid
                                : that.quizData.uid,
                    });
                }, 90000); // 90000
            }

            this.update_user_quiz();
            this.switchSubmitText = true;
        },

        //  初始化IM
        getZIM_wd() {
            let that = this;
            // 注册监听“运行时错误信息”的回调
            zim.on("error", function (zim, errorInfo) {
                // console.log("error", errorInfo.code, errorInfo.message);
            });

            // 注册监听“网络连接状态变更”的回调
            zim.on(
                "connectionStateChanged",
                function (zim, { state, event, extendedData }) {
                    // console.log(
                    //     "connectionStateChanged",
                    //     state,
                    //     event,
                    //     extendedData
                    // );
                    // 当长时间网络连接断开导致SDK内部登出时，需要重新登录
                    if (state == 0 && event == 3) {
                        // zim.login(userInfo, token);
                        console.log("网络连接状态变更");
                        that.ZIMLogin(zim).then((zim_l) => {
                            zim = zim_l;
                        });
                    }
                }
            );

            zim.on("conversationMessageReceiptChanged", function (zim, zimRes) {
                console.log("把自己发的消息标记为已读");
                // 把自己发的消息标记为已读
                for (let messageItem of that.curMessageList) {
                    if (messageItem.senderUserID == that.userInfo.id) {
                        messageItem.receiptStatus = 2;
                    }
                }
                check_read({
                    quiz_id: that.quizData.id,
                    user_id: that.userInfo.id,
                });
                if (timerId) clearTimeout(timerId);
            });

            zim.on("messageReceiptChanged", function (zim, zimRes) {
                console.log("把自己发的消息标记为已读2");
                // 把自己发的消息标记为已读
                for (let messageItem of that.curMessageList) {
                    if (messageItem.senderUserID == that.userInfo.id) {
                        messageItem.receiptStatus = 2;
                    }
                }
                check_read({
                    quiz_id: that.quizData.id,
                    user_id: that.userInfo.id,
                });
                if (timerId) clearTimeout(timerId);
            });

            // 注册监听“收到单聊消息”的回调
            zim.on("receivePeerMessage", function (zim, zimRes) {
                let { messageList, fromConversationID } = zimRes;

                console.log("单聊消息------------------------------", zimRes);
                // console.log(messageList, fromConversationID);
                // 使用变量记录是否更新，防止创建了多个定时器
                let isTimeoutUpdata = false;
                let isPush = true;
                console.log("收到单聊消息，回执处理", that.bodyHidden);
                if (that.bodyHidden) {
                    zim.sendConversationMessageReceiptRead(
                        fromConversationID,
                        0
                    );
                }
                check_read({
                    quiz_id: that.quizData.id,
                    user_id: that.userInfo.id,
                });
                for (let i = 0; i < messageList.length; i++) {
                    let extendedData = that.get_extendedData(
                        messageList[i].extendedData
                    );
                    // extendedData.quiz_id 判断对应问题id是否一样
                    if (
                        that.quizData.ans_uid &&
                        (fromConversationID == that.quizData.ans_uid ||
                            fromConversationID == that.quizData.uid) &&
                        extendedData.quiz_id == that.quizData.id
                    ) {
                        if (extendedData.type == 2) {
                            that.updataAskDetail(false);
                        }

                        for (let item of that.curMessageList) {
                            if (item.messageID == messageList[i].messageID)
                                isPush = false;
                        }
                        // 判断 messageID 有没有重复
                        if (isPush) {
                            // 把收到的消息标记为已读
                            // messageList[i].receiptStatus = 2;
                            that.curMessageList.push(messageList[i]);
                        }
                    }

                    if (
                        !that.quizData.ans_uid &&
                        (that.userInfo.id == that.quizData.uid ||
                            messageList[i].senderUserID == that.quizData.uid) &&
                        extendedData.quiz_id == that.quizData.id
                    ) {
                        isTimeoutUpdata = true;
                    }
                }
                if (isTimeoutUpdata) {
                    setTimeout(() => {
                        that.updataAskDetail(true);
                    }, 800);
                }

                console.log("单聊消息===========================");
            });
            // let data =

            // 注册监听“令牌即将过期”的回调
            zim.on("tokenWillExpire", function (zim, { second }) {
                // console.log("令牌即将过期", second);
                // 可以在这里调用 renewToken 接口来更新 token
                // 新 token 生成可以参考上文
                let token = localStorage.getItem("zegoToken");
                localStorage.removeItem("zegoToken");
                zim.renewToken(token)
                    .then(function ({ token }) {
                        // 更新成功
                        localStorage.setItem("zegoToken", token);
                        that.ZIMLogin(zim).then((zim_l) => {
                            zim = zim_l;
                        });
                    })
                    .catch(function (err) {
                        // 更新失败
                        that.ZIMLogin(zim).then((zim_l) => {
                            zim = zim_l;
                        });
                    });
            });
            this.getUserInfo2().then((user) => {
                that.ZIMLogin(zim).then((zim_l) => {
                    zim = zim_l;
                    console.log(123);
                    that.sendConversationMessageReceiptRead();
                });
            });
        },

        queryHistoryMessage() {
            // 查询单聊会话历史消息
            // let conversationID = "3122";
            // let conversationType = 0;
            // // 从后往前查询会话历史消息，每次查询 30 条
            // let config = {
            //     nextMessage: null, // 首次查询时 nextMessage 为 null
            //     count: 30,
            //     reverse: true,
            // };
            // zim.queryHistoryMessage(
            //     conversationID,
            //     conversationType,
            //     config
            // ).then((res)=>{
            //     console.log('历史消息')
            //     console.log(res)
            //     console.log('历史消息')
            // });
        },

        onSuccess(response, file, fileList) {
            if (response.code == 1) {
                this.imgUrl = response.data.fullurl;
                this.submitText(11);
            }
        },

        keydown(e) {
            if (this.submitDisabled) return;
            if (!e.shiftKey && e.keyCode == 13) {
                e.cancelBubble = true; //ie阻止冒泡行为
                e.stopPropagation(); //Firefox阻止冒泡行为
                e.preventDefault(); //取消事件的默认动作*换行
                //以下处理发送消息代码
                if (e.keyCode == 13) {
                    this.submitText(1);
                }
            }
        },

        timeIndices(v) { },

        // 倒计时结束
        finish() {
            this.quizData.status = 3;
        },

        // 结束对话弹窗
        closeConfirm() {
            this.$confirm("确定要结束服务吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.closeAsk();
                })
                .catch(() => { });
        },

        // 结束问题
        async closeAsk() {
            const res = await end_now_chat({
                quiz_id: this.quizData.id,
            });
            if (res.code == 1) {
                // this.quizData.status = 3;
                this.updataAskDetail(false);

                // this.goeasyObj.pubsub.publish({
                //     channel: this.quizData.ans_uid + "",
                //     message: JSON.stringify({
                //         type: "askClose",
                //         quiz_id: this.quizData.id,
                //     }),
                // });
            }
        },

        addPaste() {
            let that = this;
            const el = document.getElementById("ctrlVpaste");
            // 此事件也可以添加到document上，但该事件会有冒泡行为，则本页面上任何位置的粘贴操作都会触发
            el.addEventListener("paste", (e) => {
                let file = null;
                const items = (e.clipboardData || window.clipboardData).items;
                if (items && items.length) {
                    for (let i = 0; i < items.length; i++) {
                        if (items[i].type.indexOf("image") !== -1) {
                            // 如果是image类型存为file
                            file = items[i].getAsFile();
                            break;
                        }
                    }
                }
                if (file) that.paste(file);
            });
        },

        // 复制粘贴
        async paste(e) {
            const response = await commonUpload({
                file: e,
            });
            if (response.code == 1) {
                this.imgUrl = response.data.fullurl;

                const h = this.$createElement;
                this.$msgbox({
                    title: "消息",
                    message: h("img", {
                        style: {
                            width: "388px",
                            height: "258px",
                            objectFit: "contain",
                        },
                        attrs: { src: this.imgUrl },
                    }),
                    showCancelButton: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                })
                    .then((action) => {
                        this.submitText(11);
                    })
                    .catch(() => { });
            }
        },

        // 切换宽度
        changActionWitch() {
            this.actionWitch = !this.actionWitch;
        },
    },
};
</script>


<style lang="scss" scoped>
.ask_info {
    background: #daecff;
    position: relative;
    width: 100vw;
    height: 100vh;
}

.chat-bj {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.nav {
    width: 85%;
    margin: 0 auto;
    padding: 25px 0;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .nav-left {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #ffffff;

        img {
            width: 102px;
            height: 31px;
            margin-right: 32px;
        }
    }

    .nav-right {
        font-size: 18px;
        color: #ffffff;

        i {
            font-size: 24px;
            padding-right: 5px;
            cursor: pointer;
        }
    }
}

.chat {
    position: relative;
    z-index: 10;
    margin: 0 auto;
    width: 85%;
    height: 84%;
    overflow: hidden;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    display: flex;

    .dialogue {
        width: 100%;
    }

    .action {
        border-left: 1px solid #f3f3f3;
        position: relative;
        transition: width 0.4s;
        padding-top: 2%;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #888;
        }

        &::-webkit-scrollbar-track {
            border-radius: 0;
        }

        .expand {
            width: 28px;
            height: 55px;
            line-height: 55px;
            text-align: center;
            background-color: #ffffff;
            border-radius: 30px 0 0 30px;
            box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.1);
            position: absolute;
            left: -28px;
            top: calc(50% - 27.5px);
            cursor: pointer;

            i {
                transition: transform 0.5s;
                color: #1c87f3;
                font-size: 18px;
            }
        }
    }

    .chat-con {
        width: 100%;
        height: calc(100% - 225px);
        background-color: #f6f8fa;
    }
}

.action-img {
    width: 88%;
    margin: 0 auto;
    margin-bottom: 20px;

    img {
        width: 100%;
        height: auto;
    }
}

.action-item {
    width: 88%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #c6d1dc;
    overflow: hidden;
    margin-bottom: 20px;

    .promapt-list {
        padding: 10px 24px;

        .promapt-item {
            font-size: 12px;
            color: #fa5151;
            padding: 5px 0;
        }
    }

    .action-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        padding: 0 24px;
        height: 40px;
        background: #f5f9fc;

        span {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            cursor: pointer;
        }
    }

    .aciotn-list {
        padding: 10px 27px;

        .action-list-item {
            font-size: 13px;
            color: #333333;
            line-height: 36px;
            white-space: nowrap;
            /* 确保文本在一行内 */
            overflow: hidden;
            /* 隐藏超出容器的内容 */
            text-overflow: ellipsis;
            cursor: pointer;

            &:hover {
                color: #1c87f3;
                text-decoration: underline;
            }
        }

        .drop {
            min-width: 6px;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #c5e1ff;
            margin-right: 10px;
            display: inline-block;
            position: relative;
            top: -2px;
        }
    }

    .action-lits2 {
        padding-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .action-item2 {
            text-align: center;
            font-size: 14px;
            width: 70px;
            color: #333333;
            cursor: pointer;

            img {
                width: 40px;
                height: 40px;
                display: block;
                margin: 0 auto;
                margin-bottom: 9px;
            }
        }
    }
}

.chat-header {
    height: 60px;
    line-height: 60px;
    padding-left: 30px;
    padding-right: 20px;
    border-bottom: 1px solid #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
        display: flex;
        align-items: center;

        .avatar {
            position: relative;
            width: 40px;
            height: 40px;

            .img1 {
                width: 40px;
                height: 40px;
                border-radius: 40px;
                object-fit: cover;
            }

            .v {
                position: absolute;
                width: 14px;
                height: 14px;
                right: -1px;
                bottom: -2px;
            }
        }

        .nickname {
            padding: 0 13px;
            font-size: 16px;
            color: #333333;
            white-space: nowrap;
        }

        .city {
            font-size: 11px;
            color: #9c9c9c;
            padding-right: 30px;

            i {
                padding-right: 3px;
            }
        }

        .tag {
            padding: 0 9px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: #ebf5ff;
            border-radius: 2px;
            font-size: 12px;
            color: #488ed4;
            margin-right: 6px;
            white-space: nowrap;
        }
    }

    .right {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 21px;
        color: #1b8dff;

        .govip {
            height: 28px;
            width: auto;
            margin-right: 20px;
        }

        .time {
            width: 36px;
            height: 36px;
            background: #1b8dff;
            font-weight: 500;
            font-size: 21px;
            color: #ffffff;
            text-align: center;
            line-height: 36px;
        }

        .mao {
            font-weight: 700;
            font-size: 24px;
            margin: 0 7px;
        }
    }
}

.editor {
    border-top: 1px solid #e1e1e1;
}

.submit {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .submit-text {
        font-size: 14px;
        color: #666666;
        margin-right: 20px;
    }

    .submit1,
    .submit2 {
        width: 80px;
        height: 33px;
        border-radius: 4px;
        padding: 0;
        line-height: 35px;
        border-width: 0;
    }

    .submit1 {
        background-color: #f0f0f0;
        font-size: 14px;
        color: #727272;

        img {
            width: 14px;
            height: 14px;
            position: relative;
            top: 1px;
        }

        &:hover {
            opacity: 0.8;
        }

        &:active {
            background-color: #e1e1e1;
        }
    }

    .submit2 {
        // background: #1c87f3;
        font-size: 14px;
        color: #ffffff;
        margin-left: 15px;
        margin-right: 24px;
    }
}

.tool {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tool-item {
        cursor: pointer;
        padding: 5px 6px;
        margin-right: 5px;

        i {
            color: #666666;
            font-size: 24px;
        }

        img {
            width: 20px;
            height: 20px;
        }

        &:hover {
            background-color: #f3f3f3;
        }
    }

    .right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .entering {
        color: #909399;
        font-size: 12px;
    }
}

.quick-info {
    padding: 12px;

    .quick-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        border-bottom: 1px solid #d8d8d8;
        text-align: center;
        padding: 10px 0 15px 0;
    }

    .quick-list {
        padding: 0 16px;
        padding-top: 18px;
        height: 300px;
        overflow-y: scroll;

        .quick-item {
            margin: 12px 0;
            font-size: 12px;
            color: #333333;
            cursor: pointer;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // -webkit-line-clamp: 2;
            // display: -webkit-box;
            // -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;

            &:hover {
                color: #1c87f3;
            }
        }

        .quick-img {
            width: 94px;
            height: 94px;
            object-fit: contain;
            margin: 12px 9px;
            cursor: pointer;
        }
    }
}

.textarea {
    border-top: 1px solid #f3f3f3;
}

.textarea ::v-deep .el-textarea__inner {
    border-width: 0;
}

.textarea ::v-deep .el-textarea__inner::-webkit-scrollbar {
    width: 4px;
}

.textarea ::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #e1e1e1;
}

.textarea ::v-deep .el-textarea__inner::-webkit-scrollbar-track {
    border-radius: 0;
}

.answer {
    overflow: auto;
    overflow-x: hidden;
    height: 708px;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #e1e1e1;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}

.answer-tabs {
    border-bottom: 1px solid #f3f3f3;
    height: 62px;
    display: flex;

    .answer-tab {
        width: 50%;
        text-align: center;
        font-size: 16px;
        color: #333333;
        height: 62px;
        line-height: 62px;

        div {
            width: 59px;
            height: 2px;
            position: relative;
            margin: 0 auto;
            top: -5px;
        }
    }

    .active {
        color: #1c87f3;

        div {
            background: #1c87f3;
        }
    }
}

.evaluate-dialog ::v-deep .el-dialog__body {
    padding-top: 0;
    padding-bottom: 19px;
}

.evaluate {
    text-align: center;

    .title {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 9px;
    }

    .textarea {
        margin-top: 20px;
        background-color: #fafafa;
    }

    .but {
        text-align: right;
    }
}

.evaluate ::v-deep .el-rate__text {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #999999 !important;
    margin-top: 13px;
}

.evaluate ::v-deep .el-rate__icon {
    font-size: 48px;
}

.evaluate ::v-deep .el-rate {
    height: auto;
}

.check-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 5px;

    .check-box-group {
        width: 100px;
        height: 29px;
        line-height: 29px;
        text-align: center;
        border-radius: 82px;
        border: 1px solid #dcdcdc;
        margin-top: 15px;
        font-size: 13px;
        color: #999999;
        margin: 0 6px;
        margin-top: 15px;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }
    }

    .active {
        border-color: #1c87f3;
        color: #1c87f3;
    }
}

.loading {
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ans-info {
    width: 88%;
    margin: 0 auto 20px;
    padding: 1vw;
    padding-right: 0;
    display: flex;
    align-items: center;
    position: relative;
    background-size: 100% 100%;

    .avatar {
        width: 0;
        height: 1px;
        border-radius: 110px;
        object-fit: cover;
    }

    .info-text {
        margin-left: 9px;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        padding-left: 0.5vw;

        .name {
            padding-bottom: 6px;
            font-size: 20px;
            font-weight: 600;
            color: #333333;
        }

        i {
            position: relative;
            top: -3px;
            font-size: 8px;
            display: inline-block;
            height: 15px;
            line-height: 17px;
            padding: 0 6px;
            color: #1b8dff;
            background: rgba(32, 144, 255, 0.1);
            border-radius: 4px;
            border: 1px solid #1b8dff;
        }
    }

    .wx_qrcode {
        width: 5.9vw;
        height: 5.9vw;
        border-radius: 5vw;
    }

    .tips {
        font-size: 1vw;
        color: #333333;
    }
}

@keyframes wait_icon1 {
    0% {
        transform: translate(0, 0);
    }

    12.5% {
        transform: translate(2px, -4px);
    }

    25% {
        transform: translate(6px, -6px);
    }

    37.5% {
        transform: translate(10px, -4px);
    }

    50% {
        transform: translate(12px, 0px);
    }

    62.5% {
        transform: translate(10px, 4px);
    }

    75% {
        transform: translate(6px, 6px);
    }

    87.5% {
        transform: translate(2px, 4px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes plan_bar {
    0% {
        left: 0;
        transform: scaleX(1);
    }

    49.99% {
        left: calc(100% - 31px);
        transform: scaleX(1);
    }

    50% {
        left: calc(100% - 31px);
        transform: scaleX(-1);
    }

    50.01% {
        left: calc(100% - 31px);
        transform: scaleX(-1);
    }

    100% {
        left: 0;
        transform: scaleX(-1);
    }
}

.loading-con {
    width: 460px;
    background: #ffffff;
    border-radius: 26px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 49px;
    overflow: hidden;

    .pc_cswd_loading {
        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    .wait {
        position: relative;

        .wait_icon {
            // border-radius: 3450px;
            // width: 12px;
            // height: 12px;
            // position: absolute;
            // top: 69px;
            // right: 129px;
            // border: 1px red solid;
            // border-top-color: red;
            // border-left-color: black;
            // border-right-color: #1c87f3;
            // border-bottom-color: aqua;
        }

        .wait_bj {
            width: 266px;
            height: 266px;
        }

        .wait_icon1 {
            width: 63px;
            height: 78px;
            position: absolute;
            top: 42px;
            right: 149px;
            animation: wait_icon1 3.5s linear infinite;
        }
    }

    .wait_plan_bar {
        width: 280px;
        height: 9px;
        margin: 30px auto 0;
        background: #eff8ff;
        border-radius: 4px;
        position: relative;

        .plan_bar_xm_img {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: -17px;
            left: 0;
            animation: plan_bar 5s linear infinite;
        }

        .plan_bar_xm {
            width: 27px;
            height: 17px;
        }

        .plan_bar {
            width: 31px;
            height: 9px;
        }
    }

    i {
        color: #666666;
        font-size: 60px;
    }

    .text1 {
        padding-top: 16px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
    }

    .text2 {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 26px;
        padding: 40px 37px 0;
        text-align: left;
    }
}
</style>

<style>
.el-popover {
    /* padding: 0 ; */
}
</style>
